<template>
  <div class="page-container">
    <el-row>
      <el-col :span="2" style="padding-right: 10px">
        <el-tree :data="deptTree" :props="treeProps" @node-click="treeNodeClick"/>
      </el-col>
      <el-col :span="22">
        <el-row justify="space-between" style="margin-bottom: 5px">
          <el-col :span="12">
            <el-input v-model="params.name" placeholder="请输入员工姓名" size="small" clearable @keydown.enter.native="getTableList" style="width: 160px">
              <template #suffix>
                <el-icon :size="15" color="var(--el-color-primary)" @click="getTableList">
                  <ele-Search/>
                </el-icon>
              </template>
            </el-input>
            <el-popover placement="bottom-start" :width="910" trigger="click">
              <template #reference>
                <el-button size="small" :icon="Filter" style="margin-left: 10px">综合筛选</el-button>
              </template>
              <el-row>
                <el-row>
                  <span style="line-height: 24px">性别</span>
                  <el-select size="small" v-model="params.sex" placeholder="请选择" clearable style="margin: 0 20px 0 10px;width: 120px">
                    <el-option v-for="item in dictMap['SexType']" :key="item.value" :label="item.name" :value="item.value"/>
                  </el-select>
                  <span style="line-height: 24px">手机号</span>
                  <el-input v-model="params.phone" placeholder="请输入手机号" size="small" clearable style="margin: 0 20px 0 10px;width: 150px"/>
                  <span style="line-height: 24px">工号</span>
                  <el-input v-model="params.workNo" placeholder="请输入工号" size="small" clearable style="margin: 0 20px 0 10px;width: 150px"/>
                  <span style="line-height: 24px">工作城市</span>
                  <el-input v-model="params.workLocation" placeholder="请输入工作城市" clearable size="small" style="margin-left: 10px;width: 120px"/>
                </el-row>
                <el-row style="margin-top: 10px">
                  <span style="line-height: 24px">出生日期</span>
                  <el-date-picker
                      v-model="bornDateRange"
                      type="daterange"
                      style="margin: 0 20px 0 10px;width: 250px"
                      value-format="YYYY-MM-DD"
                      range-separator="至"
                      start-placeholder="范围起始时间"
                      end-placeholder="范围结束时间"
                      size="small"
                      @change="bornDateChange"
                  />
                  <span style="line-height: 24px">职位</span>
                  <el-select size="small" v-model="params.postId" placeholder="请选择" clearable style="margin: 0 20px 0 10px;width: 150px">
                    <el-option v-for="item in postList" :key="item.id" :label="item.name" :value="item.id"/>
                  </el-select>
                  <span style="line-height: 24px">合同公司</span>
                  <el-select v-model="params.companyId" placeholder="请选择合同公司" size="small" style="margin-left: 10px;width: 200px">
                    <el-option v-for="item in contractCompanyList" :key="item.id" :label="item.name" :value="item.id"/>
                  </el-select>
                </el-row>
                <el-row style="margin-top: 10px">
                  <span style="line-height: 24px">合同结束日期</span>
                  <el-date-picker
                      v-model="contractEndDateRange"
                      type="daterange"
                      style="width: 250px;margin: 0 20px 0 10px"
                      value-format="YYYY-MM-DD"
                      range-separator="至"
                      start-placeholder="范围起始时间"
                      end-placeholder="范围结束时间"
                      size="small"
                      @change="contractEndDateChange"
                  />
                  <span style="line-height: 24px">入职日期</span>
                  <el-date-picker
                      v-model="joinedDateRange"
                      type="daterange"
                      style="width: 250px;margin: 0 20px 0 10px"
                      value-format="YYYY-MM-DD"
                      range-separator="至"
                      start-placeholder="范围起始时间"
                      end-placeholder="范围结束时间"
                      size="small"
                      @change="joinedDateChange"
                  />
                  <span style="line-height: 24px">学历</span>
                  <el-select size="small" v-model="params.level" placeholder="请选择" clearable style="margin-left: 10px;width: 120px">
                    <el-option v-for="item in staffEduLevelList" :key="item.value" :label="item.name" :value="item.value"/>
                  </el-select>
                </el-row>
                <el-row style="margin-top: 10px">
                  <span style="line-height: 24px">转正日期</span>
                  <el-date-picker
                      v-model="officialDateRange"
                      type="daterange"
                      style="width: 250px;margin: 0 20px 0 10px"
                      value-format="YYYY-MM-DD"
                      range-separator="至"
                      start-placeholder="范围起始时间"
                      end-placeholder="范围结束时间"
                      size="small"
                      @change="officialDateChange"
                  />
                  <span style="line-height: 24px">离职日期</span>
                  <el-date-picker
                      v-model="leaveOfficeDateRange"
                      type="daterange"
                      style="width: 260px;margin: 0 20px 0 10px"
                      value-format="YYYY-MM-DD"
                      range-separator="至"
                      start-placeholder="范围起始时间"
                      end-placeholder="范围结束时间"
                      size="small"
                      @change="leaveOfficeDateChange"
                  />
                  <el-button type="primary" size="small" @click="currentChange">确定</el-button>
                  <el-button size="small" @click="resetParams">重置</el-button>
                </el-row>
              </el-row>
            </el-popover>
            <el-button type="primary" size="small" @click="openCreate">新建员工</el-button>
            <el-button size="small">导入</el-button>
            <el-button size="small">导出</el-button>
            <el-button size="small" :icon="Setting" @click="openHeader">表头设置</el-button>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="19">
            <el-card :body-style="{padding: `0`}" shadow="never">
              <el-row justify="space-between">
                <div :class="['stateCell', 4 == params.state ? 'state-active' : '']" style="border-right: 1px #EEE solid" @click="stateChange(4)">
                  <h3 class="state-num">{{ stateStatistics.onJob }}</h3>
                  <h3 class="state-name">在职员工</h3>
                </div>
                <template v-for="item in staffTypeList" :key="item['value']">
                  <div :class="['stateCell', item['value'] == params.type ? 'state-active' : '']" @click="typeChange(item['value'])" v-if="item['value'] == 0 || (item['value'] != 0 && typeStatistics[item['value']] > 0)">
                    <h3 class="state-num">{{ typeStatistics[item['value'] + ''] }}</h3>
                    <h3 class="state-name">{{ item.name }}</h3>
                  </div>
                </template>
                <div :class="['stateCell', staffStateList[1].value == params.state ? 'state-active' : '']" style="border-left: 1px #EEE solid" @click="stateChange(staffStateList[1].value)">
                  <h3 class="state-num">{{ stateStatistics[staffStateList[1].value] }}</h3>
                  <h3 class="state-name">{{ staffStateList[1].name }}</h3>
                </div>
                <div :class="['stateCell', staffStateList[2].value == params.state ? 'state-active' : '']" @click="stateChange(staffStateList[2].value)">
                  <h3 class="state-num">{{ stateStatistics[staffStateList[2].value + ''] }}</h3>
                  <h3 class="state-name">{{ staffStateList[2].name }}</h3>
                </div>
                <div :class="['stateCell', staffStateList[3].value == params.state ? 'state-active' : '']" @click="stateChange(staffStateList[3].value)">
                  <h3 class="state-num">{{ stateStatistics[staffStateList[3].value + ''] }}</h3>
                  <h3 class="state-name">{{ staffStateList[3].name }}</h3>
                </div>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="2" style="margin: 0 25px">
            <el-card :body-style="{padding: `0`}" shadow="never">
              <el-row justify="space-between">
                <div :class="['stateCell', staffStateList[0].value == params.state ? 'state-active' : '']" @click="stateChange(staffStateList[0].value)">
                  <h3 class="state-num">{{ stateStatistics[staffStateList[0].value + ''] }}</h3>
                  <h3 class="state-name">{{ staffStateList[0].name }}</h3>
                </div>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="2">
            <el-card :body-style="{padding: `0`}" shadow="never">
              <el-row justify="space-between">
                <div :class="['stateCell', staffStateList[4].value == params.state ? 'state-active' : '']" @click="stateChange(staffStateList[4].value)">
                  <h3 class="state-num">{{ stateStatistics[staffStateList[4].value + ''] }}</h3>
                  <h3 class="state-name">{{ staffStateList[4].name }}</h3>
                </div>
              </el-row>
            </el-card>
          </el-col>
        </el-row>

        <div class="table-box">
          <!-- 在职、全职、试用、正式 -->
          <el-table :data="tableList" size="small" class="tableList" v-show="params.state == 4 || params.state == 1 || params.state == 2 || params.type">
            <el-table-column prop="name" label="姓名" min-width="120px" fixed="left">
              <template v-slot="scope">
                <span class="primary" @click="openDetail(scope.row)">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="工作技能标签" min-width="150px"/>
            <el-table-column prop="phone" label="手机号" width="120px"/>
            <el-table-column prop="workNo" label="工号" width="120px"/>
            <el-table-column label="部门" width="120px">
              <template v-slot="{ row }">{{ row['dept'] ? row['dept']['name'] : '-' }}</template>
            </el-table-column>
            <el-table-column label="职位" width="120px">
              <template v-slot="{ row }">{{ row['officePosition'] ? row['officePosition']['name'] : '-' }}</template>
            </el-table-column>
            <el-table-column label="工作性质" width="120px">
              <template v-slot="{ row }">
                <div v-for="item in staffTypeList" :key="item.value" v-show="item.value == row.type">{{ item.name }}</div>
              </template>
            </el-table-column>
            <el-table-column label="员工状态" width="120px">
              <template v-slot="{ row }">
                <div v-for="item in staffStateList" :key="item['value']" v-show="item['value'] == row.state">{{ item['name'] }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="joinedDate" label="入职日期" width="150px"/>
            <el-table-column prop="directSuperiorName" label="直属上级" width="120px"/>
            <el-table-column label="合同公司" width="120px">
              <template v-slot="{ row }">{{ row['staffContract'] ? row['staffContract']['companyName'] : '-' }}</template>
            </el-table-column>
            <el-table-column prop="workAddress" label="工作地点" width="120px"/>
            <el-table-column label="证件类型" width="120px">
              <template v-slot="{ row }">
                <div v-for="item in dictMap['IdCardType']" :key="item.value" v-show="item.value == row.idCardType">{{ item.name }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="idCardNo" label="证件号码" width="150px"/>
            <template v-for="column in optionColumns.columnData" :key="column.name">
              <el-table-column v-if="column.visible" :label="column.name" width="150px">
                <template v-slot="{ row }">
                  <div v-if="column.dictKey">
                    <span v-for="item in dictMap[column.dictKey]" :key="item.value" v-show="item.value == (row[column.field] && column.subField ? row[column.field][column.subField] : row[column.field])">{{ item.name }}</span>
                  </div>
                  <div v-else-if="column.stateField">{{ row[column.field] == 1 ? '是' : '否' }}</div>
                  <div v-else-if="column.subField">{{ row[column.field] ? row[column.field][column.subField] : '-' }}</div>
                  <div v-else>{{ row[column.field] }}</div>
                </template>
              </el-table-column>
            </template>
          </el-table>

          <!-- 待入职 -->
          <el-table :data="tableList" size="small" class="tableList" v-show="params.state == 0">
            <el-table-column prop="name" label="姓名" min-width="90px" fixed="left">
              <template v-slot="scope">
                <span class="primary" @click="openDetail(scope.row)">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="reckonJoinedDate" label="预计入职日期" width="150px"/>
            <el-table-column label="工作技能标签" min-width="150px"/>
            <el-table-column prop="phone" label="手机号" width="120px"/>
            <el-table-column prop="workNo" label="工号" width="120px"/>
            <el-table-column label="部门" width="120px">
              <template v-slot="{ row }">{{ row['dept'] ? row['dept']['name'] : '-' }}</template>
            </el-table-column>
            <el-table-column label="职位" width="120px">
              <template v-slot="{ row }">{{ row['officePosition'] ? row['officePosition']['name'] : '-' }}</template>
            </el-table-column>
            <el-table-column label="工作性质" width="120px">
              <template v-slot="{ row }">
                <div v-for="item in staffTypeList" :key="item.value" v-show="item.value == row.type">{{ item.name }}</div>
              </template>
            </el-table-column>
            <el-table-column label="员工状态" width="120px">
              <template v-slot="{ row }">
                <div v-for="item in staffStateList" :key="item['value']" v-show="item['value'] == row.state">{{ item['name'] }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="directSuperiorName" label="直属上级" width="120px"/>
            <el-table-column label="合同公司" width="120px">
              <template v-slot="{ row }">{{ row['staffContract'] ? row['staffContract']['companyName'] : '-' }}</template>
            </el-table-column>
            <el-table-column prop="workAddress" label="工作地点" width="120px"/>
            <el-table-column label="证件类型" width="120px">
              <template v-slot="{ row }">
                <div v-for="item in dictMap['IdCardType']" :key="item.value" v-show="item.value == row.idCardType">{{ item.name }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="idCardNo" label="证件号码" width="120px"/>
            <el-table-column v-for="column in optionColumns.columnData" :key="column.name" v-show="column.visible == 1" :label="column.name" width="150px">
              <template v-slot="{ row }">
                <div v-if="column.dictKey">
                  <span v-for="item in dictMap[column.dictKey]" :key="item.value" v-show="item.value == (row[column.field] && column.subField ? row[column.field][column.subField] : row[column.field])">{{ item.name }}</span>
                </div>
                <div v-else-if="column.stateField">{{ row[column.field] == 1 ? '是' : '否' }}</div>
                <div v-else-if="column.subField">{{ row[column.field] ? row[column.field][column.subField] : '-' }}</div>
                <div v-else>{{ row[column.field] }}</div>
              </template>
            </el-table-column>
          </el-table>

          <!-- 待离职 -->
          <el-table :data="tableList" size="small" class="tableList" v-show="params.state == 3">
            <el-table-column prop="name" label="姓名" min-width="90px" fixed="left">
              <template v-slot="scope">
                <span class="primary" @click="openDetail(scope.row)">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="计划离职日期" width="150px">
              <template v-slot="{ row }">{{ row['staffLeave'] ? row['staffLeave']['planDate'] : '-' }}</template>
            </el-table-column>
            <el-table-column label="离职类型" width="120px">
              <template v-slot="{ row }">
                <div v-if="row['staffLeave']">
                  <span v-for="item in dictMap['LeaveOfficeType']" :key="item.value" v-show="item.value == row['staffLeave']['type']">{{ item.name }}</span>
                </div>
                <div v-else>-</div>
              </template>
            </el-table-column>
            <el-table-column label="离职原因" width="200px" :show-overflow-tooltip="true">
              <template v-slot="{ row }">{{ row['staffLeave'] ? row['staffLeave']['reason'] : '-' }}</template>
            </el-table-column>
            <el-table-column label="工作技能标签" min-width="150px"/>
            <el-table-column prop="phone" label="手机号" width="120px"/>
            <el-table-column prop="workNo" label="工号" width="120px"/>
            <el-table-column label="部门" width="120px">
              <template v-slot="{ row }">{{ row['dept'] ? row['dept']['name'] : '-' }}</template>
            </el-table-column>
            <el-table-column label="职位" width="120px">
              <template v-slot="{ row }">{{ row['officePosition'] ? row['officePosition']['name'] : '-' }}</template>
            </el-table-column>
            <el-table-column label="工作性质" width="120px">
              <template v-slot="{ row }">
                <div v-for="item in staffTypeList" :key="item.value" v-show="item.value == row.type">{{ item.name }}</div>
              </template>
            </el-table-column>
            <el-table-column label="员工状态" width="120px">
              <template v-slot="{ row }">
                <div v-for="item in staffStateList" :key="item['value']" v-show="item['value'] == row.state">{{ item['name'] }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="directSuperiorName" label="直属上级" width="120px"/>
            <el-table-column label="合同公司" width="120px">
              <template v-slot="{ row }">{{ row['staffContract'] ? row['staffContract']['companyName'] : '-' }}</template>
            </el-table-column>
            <el-table-column prop="workAddress" label="工作地点" width="120px"/>
            <el-table-column label="证件类型" width="120px">
              <template v-slot="{ row }">
                <div v-for="item in dictMap['IdCardType']" :key="item.value" v-show="item.value == row.idCardType">{{ item.name }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="idCardNo" label="证件号码" width="120px"/>
            <el-table-column v-for="column in optionColumns.columnData" :key="column.name" v-show="column.visible == 1" :label="column.name" width="150px">
              <template v-slot="{ row }">
                <div v-if="column.dictKey">
                  <span v-for="item in dictMap[column.dictKey]" :key="item.value" v-show="item.value == (row[column.field] && column.subField ? row[column.field][column.subField] : row[column.field])">{{ item.name }}</span>
                </div>
                <div v-else-if="column.stateField">{{ row[column.field] == 1 ? '是' : '否' }}</div>
                <div v-else-if="column.subField">{{ row[column.field] ? row[column.field][column.subField] : '-' }}</div>
                <div v-else>{{ row[column.field] }}</div>
              </template>
            </el-table-column>
          </el-table>

          <!-- 已离职 -->
          <el-table :data="tableList" size="small" class="tableList" v-show="params.state == -1">
            <el-table-column prop="name" label="姓名" min-width="90px" fixed="left">
              <template v-slot="scope">
                <span class="primary" @click="openDetail(scope.row)">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="离职日期" width="150px">
              <template v-slot="{ row }">{{ row['staffLeave'] ? row['staffLeave']['realDate'] : '-' }}</template>
            </el-table-column>
            <el-table-column label="离职类型" width="120px">
              <template v-slot="{ row }">
                <div v-if="row['staffLeave']">
                  <span v-for="item in dictMap['LeaveOfficeType']" :key="item.value" v-show="item.value == row['staffLeave']['type']">{{ item.name }}</span>
                </div>
                <div v-else>-</div>
              </template>
            </el-table-column>
            <el-table-column label="离职原因" width="200px" :show-overflow-tooltip="true">
              <template v-slot="{ row }">{{ row['staffLeave'] ? row['staffLeave']['reason'] : '-' }}</template>
            </el-table-column>
            <el-table-column label="工作技能标签" min-width="150px"/>
            <el-table-column prop="phone" label="手机号" width="120px"/>
            <el-table-column prop="workNo" label="工号" width="120px"/>
            <el-table-column label="部门" width="120px">
              <template v-slot="{ row }">{{ row['dept'] ? row['dept']['name'] : '-' }}</template>
            </el-table-column>
            <el-table-column label="职位" width="120px">
              <template v-slot="{ row }">{{ row['officePosition'] ? row['officePosition']['name'] : '-' }}</template>
            </el-table-column>
            <el-table-column label="工作性质" width="120px">
              <template v-slot="{ row }">
                <div v-for="item in staffTypeList" :key="item.value" v-show="item.value == row.type">{{ item.name }}</div>
              </template>
            </el-table-column>
            <el-table-column label="员工状态" width="120px">
              <template v-slot="{ row }">
                <div v-for="item in staffStateList" :key="item['value']" v-show="item['value'] == row.state">{{ item['name'] }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="directSuperiorName" label="直属上级" width="120px"/>
            <el-table-column label="合同公司" width="120px">
              <template v-slot="{ row }">{{ row['staffContract'] ? row['staffContract']['companyName'] : '-' }}</template>
            </el-table-column>
            <el-table-column prop="workAddress" label="工作地点" width="120px"/>
            <el-table-column label="证件类型" width="120px">
              <template v-slot="{ row }">
                <div v-for="item in dictMap['IdCardType']" :key="item.value" v-show="item.value == row.idCardType">{{ item.name }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="idCardNo" label="证件号码" width="120px"/>
            <el-table-column v-for="column in optionColumns.columnData" :key="column.name" v-show="column.visible == 1" :label="column.name" width="150px">
              <template v-slot="{ row }">
                <div v-if="column.dictKey">
                  <span v-for="item in dictMap[column.dictKey]" :key="item.value" v-show="item.value == (row[column.field] && column.subField ? row[column.field][column.subField] : row[column.field])">{{ item.name }}</span>
                </div>
                <div v-else-if="column.stateField">{{ row[column.field] == 1 ? '是' : '否' }}</div>
                <div v-else-if="column.subField">{{ row[column.field] ? row[column.field][column.subField] : '-' }}</div>
                <div v-else>{{ row[column.field] }}</div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页 -->
        <div class="page-block">
          <el-pagination
              v-model:current-page="params.current"
              v-model:page-size="params.size"
              :page-sizes="[10, 20, 30, 40]"
              :small="true"
              :disabled="false"
              :background="false"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              :hide-on-single-page="true"
              @size-change="sizeChange"
              @current-change="currentChange"
          />
        </div>
      </el-col>
    </el-row>

    <!-- 新建员工 -->
    <el-dialog v-model="addVisible" title="新建" width="800px">
      <el-tabs v-model="addTab" @tab-change="addTabChange">
        <el-tab-pane label="在职员工" name="1"/>
        <el-tab-pane label="待入职员工" name="0"/>
      </el-tabs>
      <el-form label-width="80px" :model="formData" :rules="formRules" size="small" :inline="false" ref="formRef">
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="formData.name" size="small" placeholder="请输入姓名"/>
            </el-form-item>
            <el-form-item label="工作性质" prop="type">
              <el-select v-model="formData.type" placeholder="请选择工作性质" style="width: 100%;">
                <el-option v-for="item in staffTypeList" :key="item.value" :value="item.value" :label="item.name"/>
              </el-select>
            </el-form-item>
            <el-form-item label="职位" prop="postId">
              <el-select v-model="formData.officePosition" size="small" value-key="id" placeholder="请选择职位" style="width: 100%" @change="positionChange">
                <el-option v-for="item in postList" :key="item['id']" :value="item" :label="item.name"/>
              </el-select>
            </el-form-item>
            <el-form-item label="兼任" prop="deputyPostId">
              <el-select v-model="formData.deputyPostId" size="small" value-key="id" placeholder="请选择兼任职位" style="width: 100%" @change="deputyPositionChange">
                <el-option v-for="item in postList" :key="item['id']" :value="item['id']" :label="item.name"/>
              </el-select>
            </el-form-item>
            <el-form-item label="部门" prop="oaDeptId">
              <el-tree-select v-model="formData.oaDeptId" size="small" :data="deptTree" :props="treeProps" check-strictly style="width: 100%" :render-after-expand="false"/>
            </el-form-item>
            <el-form-item label="员工状态" prop="state" v-show="formData.state != '0'">
              <el-radio-group size="small" v-model="formData.state">
                <el-radio label="1">试用</el-radio>
                <el-radio label="2">正式</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机" prop="phone">
              <el-input v-model="formData.phone" size="small" placeholder="请输入手机号"/>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="formData.email" size="small" placeholder="请输入邮箱地址"/>
            </el-form-item>
            <el-row style="margin-bottom: 18px">
              <el-col :span="12">
                <el-form-item label="职级">
                  <el-input v-if="formData.officePosition && formData.officePosition['officeGrade'] && formData.officePosition['officeGrade'].name" v-model="formData.officePosition['officeGrade'].name" size="small" disabled/>
                  <el-input v-else size="small" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="职等">
                  <el-input v-if="formData.officePosition && formData.officePosition['officeGrade'] && formData.officePosition['officeGrade']['grade']" v-model="formData.officePosition['officeGrade']['grade']" size="small" disabled/>
                  <el-input v-else size="small" disabled/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="试用期" prop="trialDay">
              <el-select size="small" v-model="formData.trialDay" placeholder="请选择试用期" clearable style="width: 100%">
                <el-option v-for="item in dictMap['StaffTrialLimit']" :key="item.value" :value="item.value" :label="item.name"/>
              </el-select>
            </el-form-item>
            <el-form-item :label="formData.state == '0' ? '预计入职日期' : '入职日期'" :label-width="formData.state == '0' ? '100px' : '80px'" prop="joinedDate">
              <el-date-picker v-model="formData.joinedDate" type="date" placeholder="请选择日期" value-format="YYYY-MM-DD" size="small" style="width: 100%"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left"><h3>更多信息</h3></el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="证件类型">
              <el-select v-model="formData.idCardType" size="small" placeholder="请选择证件类型" style="width: 100%" clearable>
                <el-option v-for="item in dictMap['IdCardType']" :key="item.value" :value="item.value" :label="item.name"/>
              </el-select>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="formData.sex" size="small" placeholder="请选择性别" style="width: 100%" clearable>
                <el-option v-for="item in dictMap['SexType']" :key="item.value" :value="item.value" :label="item.name"/>
              </el-select>
            </el-form-item>
            <el-form-item label="工号">
              <el-input v-model="formData.workNo" size="small" placeholder="请输入工号" clearable/>
            </el-form-item>
            <el-form-item label="工作城市">
              <el-cascader ref="formAreaTree" size="small" v-model="formData.workLocationCode" :options="cityList" :props="areaProps" style="width: 100%" @change="locationChange"/>
            </el-form-item>
            <el-form-item label="入职地点">
              <el-input v-model="formData.joinedAddress" size="small" placeholder="请输入入职地点" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证件号码">
              <el-input v-model="formData.idCardNo" size="small" clearable placeholder="请输入证件号码"/>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input-number v-model="formData.age" size="small" :max="999" :controls="false" style="width: 100%" placeholder="请输入年龄"/>
            </el-form-item>
            <el-form-item label="直属上级">
              <el-select v-model="formData.directSuperiorId" size="small" placeholder="请选择直属上级" style="width: 100%" filterable clearable>
                <el-option v-for="item in staffList" :key="item.id" :value="item.id" :label="item.name"/>
              </el-select>
            </el-form-item>
            <el-form-item label="工作地点">
              <el-input v-model="formData.workAddress" size="small" placeholder="请输入工作地点" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addVisible = false">关闭</el-button>
          <el-button type="primary" @click="submitData(formRef)">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 表头选择 -->
    <el-dialog v-model="dialogHeader" :append-to-body="true" width="700px" title="表头设置">
      <el-row class="header-row">
        <el-col :span="6" v-for="item in headerData.columnData" :key="item.field" style="line-height: 40px;height: 40px;display: flex;align-items: center">
          <el-checkbox v-model="item.visible" :true-label="1" :false-label="0" style="margin-right: 5px"/>
          <span style="cursor: pointer" @click="item.visible = item.visible == 1 ? 0 : 1">{{ item.name }}</span>
        </el-col>
      </el-row>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" size="small" @click="submitColumn">保存</el-button>
          <el-button size="small" @click="dialogHeader = false">取消</el-button>
        </span>
      </template>
    </el-dialog>

    <staff-detail v-model:dialogDrawer="dialogStaffDetail" v-model:staffData="formData" v-model:staffTypes="staffTypeList" v-model:staffStates="staffStateList" v-model:dictMap="dictMap" v-model:staffEduLevelList="staffEduLevelList" v-model:deptTrees="deptTree" v-model:postList="postList" v-model:staffList="staffList"/>

  </div>
</template>

<script>
import {ref, reactive, toRefs, onMounted, getCurrentInstance} from 'vue'
import {Filter, Setting} from '@element-plus/icons-vue'
import {ElMessage} from 'element-plus'
import {getPage, createStaff, getStateList, getStaffCount, getTypeList, getSelectorData} from '/@/api/oa/staff'
import {getColumnData, saveOptionColumn} from '/@/api/oa/staff/optionColumn'
import {getEduEnables} from '/@/api/oa/staff/eduLevel'
import {getTreeList} from '/@/api/oa/dept'
import {getPositionSelector} from '/@/api/oa/office/position'
import {getDictByCodes} from '/@/api/sys/dict'
import StaffDetail from '../components/StaffDetail.vue'
import {city} from '/@/utils/city'

export default {
  name: 'Staff',
  components: {
    StaffDetail
  },
  setup() {
    const formRef = ref()
    const {proxy} = getCurrentInstance()
    const state = reactive({
      params: {
        current: 1,
        size: 10,
        state: 4,
        level: null,  // 学历
        type: null,
        deptId: null,
        sex: null,
        phone: '',
        workNo: null,
        bds: null,  // 出生日期开始
        bde: null,  // 出生日期结束
        workLocation: null,
        postId: null,
        companyId: null,    // 合同签约公司id
        contractEDS: null,  // 合同结束时间开始
        contractEDE: null,  // 合同结束时间结束
        jds: null,  // 入职日期开始
        jde: null,  // 入职日期结束
        ods: null,  // 转正日期开始
        ode: null,  // 转正日期结束
        lods: null, // 离职日期开始
        lode: null  // 离职日期开始
      },
      bornDateRange: [],  // 出生日期
      contractEndDateRange: [],   // 合同结束日期
      joinedDateRange: [],    // 入职日期
      officialDateRange: [],  // 转正日期
      leaveOfficeDateRange: [],   // 离职日期
      tableList: [],
      total: 0,
      dictMap: {},
      postList: [],   // 职位数据 级联职级职等
      deptTree: [],   // 部门树形数据
      treeProps: {
        children: 'children',
        label: 'name',
        value: 'id'
      },
      staffList: [],  // 员工(上级)选择器数据
      staffStateList: [{}, {}, {}, {}, {}],
      staffTypeList: [],
      staffEduLevelList: [],
      contractCompanyList: [],
      typeStatistics: {   // 顶部员工类型(工作性质)统计数据
        '0': 0,
        '1': 1,
        '2': 2,
        '3': 3,
        '4': 4,
        '5': 5,
        '6': 6,
        '7': 7
      },
      stateStatistics: {
        'onJob': 0,
        '-1': 0,
        '0': 0,
        '1': 0,
        '2': 0,
        '3': 0,
      },
      dialogStaffDetail: false,
      addVisible: false,    // 创建员工
      addTab: '1',    // 添加员工标签页
      formData: {},
      formRules: {
        name: {required: true, message: '请输入姓名', trigger: 'blur'},
        phone: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {pattern: /^[1]([3-9])[0-9]{9}$/, message: '请输入正确的手机号', trigger: 'blur'},
        ],
        postId: {required: true, message: '请选择职位', trigger: 'change'},
        joinedDate: {required: true, message: '请选择日期', trigger: 'change'},
        type: {required: true, message: '请选择工作性质', trigger: 'change'},
        oaDeptId: {required: true, message: '请选择部门', trigger: 'change'},
      },
      cityList: city,
      areaProps: {
        expandTrigger: 'hover',
        value: 'code'
      },
      dialogHeader: false,
      headerData: {},   //可选隐藏列的编辑数据
      optionColumns: {
        id: null,
        userId: null,
        enterpriseId: null,
        columnData: [
          {
            field: 'sex',
            subField: '',
            name: '性别',
            visible: 0,
            dictKey: 'SexType',
            stateField: false
          },
          {
            field: 'bornDate',
            subField: '',
            name: '出生日期',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'birthday',
            subField: '',
            name: '生日',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'age',
            subField: '',
            name: '年龄',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'marryState',
            subField: '',
            name: '是否已婚',
            visible: 0,
            dictKey: '',
            stateField: true
          },
          {
            field: 'bearState',
            subField: '',
            name: '是否已育',
            visible: 0,
            dictKey: '',
            stateField: true
          },
          {
            field: 'country',
            subField: '',
            name: '国家地区',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'nation',
            subField: '',
            name: '民族',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'political',
            subField: '',
            name: '政治面貌',
            visible: 0,
            dictKey: 'PoliticalType',
            stateField: false
          },
          {
            field: 'nativePlace',
            subField: '',
            name: '籍贯',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'censusRegister',
            subField: '',
            name: '户籍所在地',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'health',
            subField: '',
            name: '健康状况',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'engName',
            subField: '',
            name: '英文名',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'censusRegisterType',
            subField: '',
            name: '户口性质',
            visible: 0,
            dictKey: 'CensusRegisterType',
            stateField: false
          },
          {
            field: 'trialDay',
            subField: '',
            name: '试用期',
            visible: 0,
            dictKey: 'StaffTrialLimit',
            stateField: false
          },
          {
            field: 'deputyOfficePosition',
            subField: 'name',
            name: '兼任',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'officePost',
            subField: 'name',
            name: '职务',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'officePosition',
            subField: 'gradeName',
            name: '职级',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'officePosition',
            subField: 'grade',
            name: '职等',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'workLocation',
            subField: '',
            name: '工作城市',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'workAddress',
            subField: '',
            name: '工作地点',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'recruitChannel',
            subField: '',
            name: '招聘渠道',
            visible: 0,
            dictKey: 'RecruitChannel',
            stateField: false
          },
          {
            field: 'joinedAge',
            subField: '',
            name: '司龄',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'staffContract',
            subField: 'type',
            name: '现合同类型',
            visible: 0,
            dictKey: 'StaffContractType',
            stateField: false
          },
          {
            field: 'staffContract',
            subField: 'code',
            name: '现合同编号',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'staffContract',
            subField: 'startDate',
            name: '现合同开始日期',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'staffContract',
            subField: 'endDate',
            name: '现合同结束日期',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'staffContract',
            subField: 'term',
            name: '现合同期限',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'staffContract',
            subField: 'companyName',
            name: '现合同签约公司',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'contractNum',
            subField: '',
            name: '合同签订次数',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'salarySocial',
            subField: 'salaryCardNo',
            name: '工资卡卡号',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'salarySocial',
            subField: 'salaryCardLocation',
            name: '工资卡开户城市',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'salarySocial',
            subField: 'bankName',
            name: '银行名称',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'salarySocial',
            subField: 'openBankName',
            name: '工资卡开户行',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'salarySocial',
            subField: 'socialInsuranceAccount',
            name: '个人社保账号',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'salarySocial',
            subField: 'accumulationFundAccount',
            name: '个人公积金账号',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'staffEdu',
            subField: 'levelName',
            name: '最高学历',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'staffEdu',
            subField: 'universityName',
            name: '毕业院校',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'staffEdu',
            subField: 'majorName',
            name: '毕业专业',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'staffEdu',
            subField: 'graduateTime',
            name: '毕业时间',
            visible: 0,
            dictKey: '',
            stateField: false
          },
          {
            field: 'staffEdu',
            subField: 'degree',
            name: '学位类型',
            visible: 0,
            dictKey: 'EducationDegree',
            stateField: false
          },
          {
            field: 'staffEdu',
            subField: 'learnShape',
            name: '学习形式',
            visible: 0,
            dictKey: 'LearnShape',
            stateField: false
          }
        ]
      }   // 可选隐藏列
    })
    const currentChange = (current) => {
      state.params.current = current
      getTableList()
    }
    const sizeChange = (size) => {
      state.params.size = size
      currentChange(1)
    }
    const getTableList = () => {
      try {
        getPage(state.params).then(res => {
          state.tableList = res.data.records
          state.total = res.data.total
        })
      } catch (e) {
        console.log(e)
      }
    }
    const initData = () => {
      try {
        getDictByCodes([
            'SexType', 'LeaveOfficeType', 'IdCardType', 'StaffTrialLimit', 'CensusRegisterType', 'LearnShape', 'EducationDegree'
        ]).then(res => state.dictMap = res.data)
        getEduEnables().then(res => state.staffEduLevelList = res.data)
        getColumnData().then(res => {
          if (res.data) {
            res.data.columnData = JSON.parse(res.data.columnData)
            state.optionColumns = res.data
          }
        })
        getTreeList().then(res => state.deptTree = res.data)
        getTypeList().then(res => {
          state.staffTypeList = res.data
          state.typeStatistics = {}
          state.staffTypeList.forEach(item => state.typeStatistics[item.value] = 0)
        })
        getStateList().then(res => {
          state.staffStateList = res.data
          state.stateStatistics = {'onJob': 0}
          state.staffStateList.forEach(item => state.stateStatistics[item.value + ''] = 0)
        })
        getStaffCount().then(res => {
          Object.keys(state.typeStatistics).forEach(key => state.typeStatistics[key] = res.data['typeData'][key] || 0)
          Object.keys(state.stateStatistics).forEach(key => state.stateStatistics[key] = res.data['stateData'][key] || 0)
        })
        getPositionSelector().then(res => state.postList = res.data)
        getSelectorData().then(res => state.staffList = res.data)
      } catch (e) {
        console.log(e)
      }
    }
    const openCreate = () => {
      initFormData()
      state.addVisible = true
    }
    const openDetail = (staff) => {
      state.formData = Object.assign({}, staff)
      state.dialogStaffDetail = true
    }
    const bornDateChange = (dateArr) => {
      if (dateArr) {
        state.params.bds = dateArr[0]
        state.params.bde = dateArr[1]
      } else {
        state.params.bds = state.params.bde = null
      }
    }
    const submitData = (formRef) => {
      formRef.validate((valid) => {
        if (!valid) {
          return false
        }
        const data = Object.assign({}, state.formData)
        // 如果是待入职, 把入职日期替换成预计入职日期
        if (data.state == '0') {
          data.reckonJoinedDate = data.joinedDate
          data.joinedDate = null
        }
        // 工作城市 数组转逗号分割字符串
        if (data.workLocationCode) {
          data.workLocation = data.workLocation.join(',')
          data.workLocationCode = data.workLocationCode.join(',')
        }
        try {
          createStaff(data).then(res => {
            ElMessage.success('添加成功')
            getTableList()
            state.addVisible = false
          })
        } catch (e) {
          console.log(e)
        }
      })
    }
    const resetParams = () => {
      state.params = {
        current: 1,
        size: 10,
        state: state.params.state,
        type: state.params.type,
        deptId: state.params.deptId,
        sex: null,
        phone: '',
        workNo: null,
        bds: null,  // 出生日期开始
        bde: null,  // 出生日期结束
        workLocation: null,
        postId: null,
        companyId: null,    // 合同签约公司id
        contractEDS: null,  // 合同结束时间开始
        contractEDE: null,  // 合同结束时间结束
        jds: null,  // 入职日期开始
        jde: null,  // 入职日期结束
        ods: null,  // 转正日期开始
        ode: null,  // 转正日期结束
        lods: null, // 离职日期开始
        lode: null  // 离职日期开始
      }
      state.bornDateRange = state.contractEndDateRange = state.joinedDateRange = state.officialDateRange = state.leaveOfficeDateRange = []
      getTableList()
    }
    const contractEndDateChange = (dateArr) => {
      if (dateArr) {
        state.params.contractEDS = dateArr[0]
        state.params.contractEDE = dateArr[1]
      } else {
        state.params.contractEDS = state.params.contractEDE = null
      }
    }
    const joinedDateChange = (dateArr) => {
      if (dateArr) {
        state.params.jds = dateArr[0]
        state.params.jde = dateArr[1]
      } else {
        state.params.jds = state.params.jde = null
      }
    }
    const officialDateChange = (dateArr) => {
      if (dateArr) {
        state.params.ods = dateArr[0]
        state.params.ode = dateArr[1]
      } else {
        state.params.ods = state.params.ode = null
      }
    }
    const leaveOfficeDateChange = (dateArr) => {
      if (dateArr) {
        state.params.lods = dateArr[0]
        state.params.lode = dateArr[1]
      } else {
        state.params.lods = state.params.lode = null
      }
    }
    const stateChange = (val) => {
      state.params.state = val
      state.params.type = null
      getTableList()
    }
    const typeChange = (val) => {
      state.params.type = val
      state.params.state = null
      getTableList()
    }
    const treeNodeClick = (e) => {
      state.params.deptId = e.id
      getTableList()
    }
    const addTabChange = (val) => {
      state.formData.state = val
    }
    const locationChange = () => {
      state.formData.workLocation = proxy.$refs['formAreaTree'].getCheckedNodes()[0].pathLabels
    }
    const initFormData = () => {
      state.formData = {
        id: null,
        oaDeptId: null,
        name: null,
        engName: null,
        workNo: null,
        phone: null,
        email: null,
        idCardNo: null,
        idCardType: null,
        sex: null,
        age: null,
        bornDate: null,
        postId: null,
        officePosition: null,
        deputyPostId: null,
        state: '1',
        joinedDate: null,
        reckonJoinedDate: null,
        trialDay: null,
        type: null,
        workLocation: null,
        workLocationCode: null,
        workAddress: null,
        joinedAddress: null,
        directSuperiorId: null
      }
    }
    const positionChange = (val) => {
      if (val && val.id == state.formData.deputyPostId) {
        ElMessage.warning('请勿选择与兼任职位相同的职位')
        state.formData.officePosition = null
      } else {
        state.formData.postId = val.id
      }
    }
    const deputyPositionChange = (val) => {
      if (val && val == state.formData.postId) {
        ElMessage.warning('请勿选择与职位相同的兼任职位')
        state.formData.deputyPostId = null
      }
    }
    const openHeader = () => {
      state.headerData = {
        id: state.optionColumns.id,
        userId: state.optionColumns.userId,
        enterpriseId: state.optionColumns.enterpriseId,
        columnData: []
      }
      state.optionColumns.columnData.forEach(column => state.headerData.columnData.push(Object.assign({}, column)))
      state.dialogHeader = true
    }
    const submitColumn = () => {
      try {
        const params = Object.assign({}, state.headerData)
        params.columnData = JSON.stringify(params.columnData)
        saveOptionColumn(params).then(res => {
          state.optionColumns = state.headerData
          ElMessage.success('保存成功！')
          state.dialogHeader = false
        })
      } catch (e) {
        console.log(e)
      }
    }
    onMounted(() => {
      initData()
      getTableList()
    })
    return {
      ...toRefs(state),
      Filter,
      Setting,
      formRef,
      initData,
      sizeChange,
      openCreate,
      openDetail,
      submitData,
      typeChange,
      addTabChange,
      resetParams,
      openHeader,
      submitColumn,
      stateChange,
      getTableList,
      currentChange,
      treeNodeClick,
      bornDateChange,
      locationChange,
      positionChange,
      joinedDateChange,
      officialDateChange,
      deputyPositionChange,
      contractEndDateChange,
      leaveOfficeDateChange
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  padding: 1px;

  .stateCell {
    position: relative;
    padding: 15px 5px;
    cursor: pointer;
    flex: auto;
    text-align: center;

    .state-num {
      padding-bottom: 2px;
      color: var(--el-text-color-regular);
      font-size: 18px;
    }

    .state-name {
      font-weight: normal;
      font-size: 15px;
      color: var(--el-text-color-primary);
    }

    &:hover {
      .state-num, .state-name {
        color: var(--el-color-primary);
      }
    }
  }

  .state-active {
    .state-num, .state-name {
      color: var(--el-color-primary);
    }

    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      width: 50px;
      margin: 0 auto;
      border-bottom: 2px solid var(--el-color-primary);
    }
  }

  .tableList {
    border: 1px solid var(--el-table-border-color);
    border-bottom: none;

    :deep(thead .cell) {
      display: flex;
      align-items: center;
    }

    :deep(thead .el-icon) {
      margin-top: -2px;
    }

    .primary {
      cursor: pointer;
      color: var(--el-color-primary);
    }
  }

  .table-box {
    background: #fff;
    margin-top: 10px;

    :deep(.el-table__header-wrapper .el-table__cell) {
      background: var(--el-color-primary-light-9);
      color: var(--next-bg-menuBar-light-1);
    }
  }

  :deep(el-input__wrapper) {
    padding: 0;
  }

  :deep(.el-input-number .el-input__inner) {
    text-align: left !important;
  }

  .header-row {
    span:hover {
      color: var(--el-color-primary);
    }
  }
}
</style>
